<template>
  <div>
    <v-dialog :title="flag ? '编辑物业信息' : '新增物业信息'" :show.sync="dialogVisible" @beforeClose="beforeClose" :close-on-click-modal="false" width="1000px">
      <div class="card-box">
        <div class="card-title">物业信息</div>
        <el-form
          ref="propertyInformation"
          label-position="top"
          :model="baseForm.propertyInformation"
          class="form-wrap"
          size="small"
          :rules="propertyInformation_rules"
        >
          <el-form-item label="楼栋名称" prop="buildingName">
            <el-input maxlength="25" placeholder="请输入" v-model="baseForm.propertyInformation.buildingName"></el-input>
          </el-form-item>
          <el-form-item label="所属楼层" prop="floor">
            <el-input type="number" maxlength="25" placeholder="请输入" v-model="baseForm.propertyInformation.floor"></el-input>
          </el-form-item>
          <el-form-item label="物业名称" prop="propertyName">
            <el-input
              maxlength="25"
              :disabled="(baseForm.propertyInformation.splitMergeStatus == '1' || baseForm.propertyInformation.splitMergeStatus == '2')"
              placeholder="请输入"
              v-model="baseForm.propertyInformation.propertyName"
              @blur="handleClear"
            ></el-input>
          </el-form-item>
          <el-form-item label="建筑面积(m²)" prop="buildingArea">
            <el-input type="number" v-model="baseForm.propertyInformation.buildingArea" placeholder="请输入建筑面积"></el-input>
          </el-form-item>
          <el-form-item label="物业大类" prop="projectType">
            <el-select v-model="baseForm.propertyInformation.projectType" placeholder="请选择物业大类" @change="changeProjectType">
              <el-option v-for="item in projectTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="物业小类" prop="projectSubclassType">
            <el-select v-model="baseForm.propertyInformation.projectSubclassType" placeholder="请选择物业大类">
              <el-option v-for="item in propertyUseTypesFilter" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="经营情况" prop="operation">
            <el-select v-model="baseForm.propertyInformation.operation" placeholder="请选择经营情况" :disabled="flag">
              <el-option v-for="item in operations" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="可用状态" prop="status" v-show="flag && userName === 'admin'">
            <el-select v-model="baseForm.propertyInformation.status" placeholder="请选择可用状态">
              <el-option v-for="item in roomUseStatus" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="规划用途" prop="planUse">
            <el-select placeholder="请选择规划用途" v-model="baseForm.propertyInformation.planUse">
              <el-option v-for="item in planUses" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="停车位数(个)" prop="parkingSpotNum" v-if="this.baseForm.propertyInformation.planUse === '30'">
            <el-input maxlength="18" placeholder="请选择停车位数" v-model="baseForm.propertyInformation.parkingSpotNum"></el-input>
          </el-form-item>
          <el-form-item label="物业来源" prop="propertySource">
            <el-select v-model="baseForm.propertyInformation.propertySource" placeholder="请选择物业来源">
              <el-option v-for="item in propertySources" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="物业权属" prop="propertyOwnership">
            <el-select v-model="baseForm.propertyInformation.propertyOwnership" placeholder="请选择物业权属">
              <el-option v-for="item in belongs" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="VR地址" prop="vrUrl">
            <el-input maxlength="100" v-model="baseForm.propertyInformation.vrUrl" placeholder="请输入VR地址"></el-input>
          </el-form-item>
        </el-form>
        <div class="card-title">其他信息</div>
        <el-form ref="otherInformation" label-position="top" :model="baseForm.otherInformation" class="form-wrap" size="small">
          <el-form-item label="移交方式" prop="transferType">
            <el-select placeholder="请选择" v-model="baseForm.otherInformation.transferType">
              <el-option v-for="item in transferModeOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="移交单位" prop="transferUnit">
            <el-input maxlength="25" placeholder="请输入" v-model="baseForm.otherInformation.transferUnit"></el-input>
          </el-form-item>
          <el-form-item label="移交日期" prop="receiveTime">
            <el-date-picker v-model="baseForm.otherInformation.receiveTime" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>
          </el-form-item>
          <el-form-item label="备注" prop="transferDesc" class="full">
            <el-input maxlength="200" v-model="baseForm.otherInformation.transferDesc" placeholder="请输入备注"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="foot">
        <el-button @click="handleCancel" class="receiver">取 消</el-button>
        <el-button v-throttle="[handleCommit]">添 加</el-button>
      </span>
    </v-dialog>
  </div>
</template>

<script>
import { validateRoomName } from '../../api/rentalProperty.js'
import { doubleValidate } from '~/utils/validate.js'
import dbl from '~/utils/dbl'
export default {
  name: "property-information",
  data () {
    let validateCarNum = (rule, value, callback) => {
      if (!value) {
        callback()
      }
      this.handleValidateRoomName(value, callback)
    };
    let validateFloor = (rule, value, callback) => {
      if (!value) {
        callback()
      }
      let reg = /^-?[1-9]\d*$/;
      if (!reg.test(value)) {
        return callback(new Error("请输入-20至400之间非0的整数"));
      } else {
        if (value > 400) {
          return callback(new Error("最大值不超过400"));
        } else if (value < -20) {
          return callback(new Error("最小值不小于-20"));
        } else {
          callback();
        }
      }
    };
    return {
      dialogVisible: false,
      flag: false,
      roomId: '',
      user: dbl.get('user'),
      userName: '',
      baseForm: {
        propertyInformation: {
          buildingName: '',
          floor: '',
          propertyName: '',
          buildingArea: '',
          projectType: '',
          projectSubclassType: '',
          operation: '',
          status: '',
          planUse: '',
          parkingSpotNum: '',
          propertySource: '',
          propertyOwnership: '',
          vrUrl: ''
        },
        otherInformation: {
          transferType: '',
          transferUnit: '',
          receiveTime: '',
          transferDesc: ''
        }
      },
      propertyInformation_rules: {
        buildingName: [
          { required: true, message: "请输入楼栋名称", trigger: "blur" }
        ],
        floor: [
          { required: true, message: "请输入所属楼层", trigger: "blur" },
          { validator: validateFloor, trigger: "blur" }
        ],
        propertyName: [
          { required: true, message: "请输入物业名称", trigger: "blur" },
          { validator: validateCarNum, trigger: "blur" }
        ],
        buildingArea: [
          { required: true, message: "请输入建筑面积", trigger: "blur" },
          { validator: doubleValidate, trigger: "blur" }
        ],
        projectType: [
          { required: true, message: "请选择物业大类", trigger: "change" }
        ],
        projectSubclassType: [
          { required: true, message: "请选择物业小类", trigger: "change" }
        ],
        operation: [
          { required: true, message: "请选择经营情况", trigger: "change" }
        ],
        status: [
          { required: true, message: "请选择可用状态", trigger: "change" }
        ],
        planUse: [
          { required: true, message: "请选择规划用途", trigger: "change" }
        ],
        parkingSpotNum: [
          { required: true, message: "请输入停车位数", trigger: "blur" }
        ],
        propertySource: [
          { required: true, message: "请选择物业来源", trigger: "change" }
        ],
        belong: [
          { required: true, message: "请选择物业权属", trigger: "change" }
        ],
      },
      projectTypes: [],
      propertyUseTypes: [],
      propertyUseTypesFilter: [],
      operations: [],
      roomUseStatus: [],
      planUses: [],
      propertySources: [],
      belongs: [],
      transferModeOption: [],
      propertyNameList: []
    }
  },
  methods: {
    beforeClose (done) {
      done()
      this.handleCancel()
    },
    handleCancel () {
      this.dialogVisible = false
      this.baseForm.propertyInformation = {}
      this.baseForm.otherInformation = {}
      this.$emit('doCancel')
    },
    handleCommit () {
      this.$refs.propertyInformation.validate((valid) => {
        if (valid) {
          this.$emit('doProperty', JSON.parse(JSON.stringify(this.baseForm)))
          this.handleCancel()
          this.roomId = ''
        }
      })
    },
    show ([data], flag) {
      this.dialogVisible = true
      this.flag = flag
      if (this.flag === true) {
        this.roomId = data.roomId
        this.baseForm.propertyInformation = {
          ...this.baseForm.propertyInformation,
          ...data,
        }
        this.baseForm.otherInformation = {
          ...this.baseForm.otherInformation,
          ...data,
        }
      }
      //过滤物业小类
      this.propertyUseTypesFilter = this.propertyUseTypes.filter(ut => ut.value.indexOf(this.baseForm.propertyInformation.projectType) == 0)
      this.rentPropertyVos.map(item => {
        this.propertyNameList.push(item.propertyName)
      })
    },
    // 校验物业名称是否重复
    handleValidateRoomName (value, callback) {
      validateRoomName({ 'roomId': this.roomId, 'roomName': value }).then(res => {
        if (res.data.data === 0) {
          return callback();
        } else {
          return callback(new Error("物业名称不能重复"));
        }
      })
    },
    handleClear () {
      let pnames = this.rentPropertyVos.filter(it => (it.propertyName == this.baseForm.propertyInformation.propertyName
        && it.serialNumber !== this.baseForm.propertyInformation.serialNumber))
      if (pnames && pnames.length) {
        this.$message.error('物业名称不能重复!')
        this.baseForm.propertyInformation.propertyName = ''
      }
    },
    //根据物业类型，获取对应的物业用途
    changeProjectType (val) {
      //重置物业用途
      this.propertyUseTypesFilter = []
      if (val) {
        this.baseForm.propertyInformation.projectSubclassType = ''
        //过滤物业小类
        this.propertyUseTypesFilter = this.propertyUseTypes.filter(ut => ut.value.indexOf(val) == 0)
      }
    },
  },
  created () {
    this.projectTypes = this.getDict('property_types')
    this.propertyUseTypes = this.getDict("property_use_types")
    this.operations = this.getDict('property_operations')
    this.roomUseStatus = this.getDict('room_use_status')
    this.planUses = this.getDict('plan_uses')
    this.propertySources = this.getDict('property_source')
    this.belongs = this.getDict('belongs')
    this.transferModeOption = this.getDict('transfer_types')
    this.baseForm.propertyInformation.status = '10'
    this.userName = this.user.username
  },
  props: ['rentPropertyVos']
}
</script>

<style scoped lang="scss">
@include formWrap(4);
</style>
